---
id: {{id}}
title: {{title}}
---

import {IconsStyle} from '@site/src/components/Docs_Icons';
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from '@theme/CodeBlock';
import { BiInfoCircle } from 'react-icons/bi';
{{#if usageFileExists}}
import Usage from "../component_usage/{{title}}.mdx";
{{/if}}
{{#if playgroundExists}}
import Play from '@site/playground/{{title}}/{{id}}.playground';
{{/if}}

<IconsStyle/>

{{{description}}}


{{#if installation}}
## Installation

<Tabs
  groupId="component"
  defaultValue="npm"
  values={[
    { label: "NPM", value: "npm" },
    { label: "Yarn", value: "yarn" },
  ]}
>
<TabItem value="npm">
  
```bash
npm install @rneui/{{installation}}
```

</TabItem>
<TabItem value="yarn">

```bash
yarn add @rneui/{{installation}}
```

</TabItem>
</Tabs>
{{/if}}


<div class="row inline-flex-center" >
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { {{parentComponent}} } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{' '}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`{{themeKey}}`}</CodeBlock>
  </div>
</div>


## Usage

{{{usage}}}

{{#if usageFileExists}}
<Usage/>
{{/if}}

{{#if anatomy}}

## Anatomy

<div class="container">
  <div class="row">
    <div class="col col--6 col--offset-3">
      <img src="/img/anatomy/{{id}}.png" alt="{{title}} anatomy" />
    </div>
  </div>
</div>
{{/if}}

{{#if showProps}}
## Props
{{#if includeProps}}
:::note
Includes all {{includeProps}} props.
:::
{{/if}}
{{#if props}}
<div class='table-responsive'>

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
{{#each props}}
{{#with this}}
|{{{name}}}|{{{type}}}|{{{default}}}|{{{description}}}|
{{/with}}
{{/each}}

</div>
{{/if}}
{{/if}}




{{#if playgroundExists}}
## Playground

<Play/>

{{/if}}
